<script>
import {outboundPage} from "@/api/bePutInStorage";
import {carriersAll} from "@/api/carriers";

export default {
    data() {
        return {
            queryParams:{
                products:null,
                quantity:null,
                carriersId:null,
                pageNum:1,
                pageSize:5,
                total:0,
                pages:0,
            },
            carriers:[],
            showSearch: true, // 控制搜索表单的显示与隐藏
            outBoundLisy:[],
        };
    },
    methods:{
      selOutStorage(){
          let that = this
          outboundPage(that.queryParams).then(function (res){
              if (res.code == 200){
                  that.outBoundLisy = res.data.records
                  that.queryParams.total = res.data.total
                  that.queryParams.pages = res.data.pages
                  that.queryParams.pageSize = res.data.size
              }
          })
      },
        handleQuery(){
            let that = this
            that.queryParams.pageNum= 1
            that.selOutStorage()
        },
        getCarriers() {
          let that = this
            carriersAll().then(function (res){
                if (res.code ==200){
                    that.carriers = res.data
                }
            })
        },
        currentChange(number){
            let that = this
            that.queryParams.pageNum = number
            that.selOutStorage()
        }
    },
    created() {
        let that = this
        that.selOutStorage()
        that.getCarriers()
    }
}
</script>

<template>
  <div>
    <h4>基本信息</h4>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="font-weight: bolder;text-align: left">
          <el-form-item label="产品名称" prop="products">
              <el-input
                      v-model="queryParams.products"
                      placeholder="请输入产品名称"
                      clearable
              />
          </el-form-item>

          <el-form-item label="出库数量" prop="quantity">
              <el-input
                      v-model="queryParams.quantity"
                      placeholder="请输入出库数量"
                      clearable
              />
          </el-form-item>

          <el-form-item label="物流公司" prop="carriersId">
              <el-select v-model="queryParams.carriersId" placeholder="请选择物流公司">
                  <el-option label="--请选择物流公司--" value="0" key="0"></el-option>
                  <el-option
                          v-for="s in carriers"
                          :label="s.name" :value="s.id" :key="s.id">
                  </el-option>
              </el-select>
          </el-form-item>

          <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
      </el-form>

    <h4>商品出库信息</h4>
      <el-table
          :data="outBoundLisy"
          style="width: 100%">
          <el-table-column
              prop="id"
              label="出库ID"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="productName"
              label="商品名称"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="corporationName"
              label="物流公司">
          </el-table-column>
          <el-table-column
              prop="quantity"
              label="出库数量">
          </el-table-column>
          <el-table-column
              prop="contactName"
              label="物流负责人">
          </el-table-column>
          <el-table-column
              prop="price"
              label="单价">
          </el-table-column>
          <el-table-column
              prop="shipmentData"
              label="出库时间">
          </el-table-column>
          <el-table-column label="状态">
<!--              <template #default="scope">-->
                  {{"出库"}}
<!--              </template>-->
          </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="total,prev, pager, next,jumper"
          :total="queryParams.total"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          @current-change="currentChange"
      >
      </el-pagination>


  </div>
</template>

<style scoped>

</style>